import { defineComponent, onMounted, shallowRef } from 'vue'
import { useStore } from 'vuex'
import { ElLoading } from 'element-plus'

import type { mapViewPropsType } from './typings'

import useAMap from '~/hooks/useAMap'
import equipmentCenterIcon from '~/assets/equipmentCenter.png'
import qidianIcon from '~/assets/qidian.png'
import zhongdianIcon from '~/assets/zhongdian.png'

export default defineComponent({
  name: 'MapView',
  props: ['id', 'markers', 'setFitView', 'lineArr', 'iSpolyline', 'isMarkers', 'iocnType'],
  setup(props: mapViewPropsType, { expose }) {
    const store = useStore()
    const marker = shallowRef()

    onMounted(() => {
      store.dispatch('user/GetCurrentTenant') // 获取租户设置的坐标
    })
    const loading = ElLoading.service({
      target: `#${props.id}`,
      lock: true,
      text: '加载中'
    })
    const userinfo = JSON.parse(window.localStorage.getItem('userinfo') || '')
    const [mapRef, aMapRef, amapIconRef] = useAMap(
      props.id,
      {
        center: [userinfo.lon, userinfo.lat],
        zoom: 11
      },
      initAMap
    )
    const iocn = [amapIconRef.value, equipmentCenterIcon]
    //  绘制线
    const polyline = () => {
      setTimeout(() => {
        aMapRef.value.plugin(['AMap.MoveAnimation'], () => {
          marker.value = new aMapRef.value.Marker({
            map: mapRef.value,
            icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
            position: props.lineArr[0],
            offset: new aMapRef.value.Pixel(-13, -26)
          })
          const poly = new aMapRef.value.Polyline({
            map: mapRef.value,
            path: props.lineArr,
            showDir: true,
            strokeColor: '#28F',
            strokeWeight: 6
          })
          mapRef.value.add(poly)
          const passedPolyline = new aMapRef.value.Polyline({
            map: mapRef.value,
            strokeColor: '#AF5',
            strokeWeight: 6
          })
          marker.value.on('moving', (e: any) => {
            passedPolyline.setPath(e.passedPath)
            mapRef.value.setCenter(e.target.getPosition(), true)
          })
          mapRef.value.setFitView()
          // 起点
          const qodian = new aMapRef.value.Marker({
            icon: new aMapRef.value.Icon({
              size: new aMapRef.value.Size(30, 30),
              imageSize: new aMapRef.value.Size(30, 30),
              image: qidianIcon
            }),
            position: props.lineArr[0],
            offset: [-12, -22]
          })
          // 终点
          mapRef.value.add(qodian)
          const zhongdian = new aMapRef.value.Marker({
            icon: new aMapRef.value.Icon({
              size: new aMapRef.value.Size(30, 30),
              imageSize: new aMapRef.value.Size(30, 30),
              image: zhongdianIcon
            }),
            position: props.lineArr[props.lineArr.length - 1],
            offset: [-12, -22]
          })
          mapRef.value.add(zhongdian)
        })
      }, 1000)
    }
    //  点击巡视动画
    const moveAlong = () => {
      marker.value.moveAlong(props.lineArr, {
        duration: 100,
        autoRotation: true
      })
    }
    //  清除标记点
    const handleClearAMapMarker = () => {
      if (mapRef.value) mapRef.value.clearMap()
    }
    //  循环标点
    const loopMarker = () => {
      handleClearAMapMarker()
      setTimeout(() => {
        props.markers.forEach((item) => {
          handleAddAMapMarker(item.longitude, item.latitude)
        })
        if (props.setFitView) mapRef.value.setFitView()
      }, 1000)
    }
    //  添加标点
    const handleAddAMapMarker = (lng: number, lat: number) => {
      const { iocnType = 1 } = props
      const markerPattern = new aMapRef.value.Marker({
        // icon: iocn[iocnType],
        icon: new aMapRef.value.Icon({
          size: new aMapRef.value.Size(22, 38),
          imageSize: new aMapRef.value.Size(22, 38),
          image: iocn[iocnType]
        }),
        position: [lng, lat],
        offset: [-12, -22]
      })
      mapRef.value.add(markerPattern)
    }
    function initAMap() {
      if (props.isMarkers) loopMarker()
      if (props.iSpolyline) polyline()
      loading.close()
    }
    // 暴露方法给父组建
    expose({
      moveAlong,
      loopMarker
    })

    return () => <section style="height: 100%;" id={props.id}></section>
  }
})
